リストのマーク表示を変更する
リスト表示を行うULタグでは、「type」オプションの指定により先頭につくマーク表示を「●」「○」「■」から選択することができます。ところが、ULタグにスタイルシートを追加すると、これら以外のマーク表示を選択したり、画像をマーク表示に利用することが可能となります。今週は、リストのマーク表示を変更する方法を紹介してみましょう。

→ 「list-style-type」でマーク表示を変更する
 
マーク表示を変更させたいリストでは、ULタグにスタイルシート「list-style-type」を追加します。「list-style-type」に指定できる値は、「disc」「circle」「square」「decimal」「lower-roman」「upper-roman」「lower-alpha」「upper-alpha」「none」など多数ありますが、マークが正しく表示されるかは使用しているブラウザによって異なります。
<UL style="list-style-type:lower-roman">
<LI>りんご</LI>
<LI>バナナ</LI>
<LI>オレンジ</LI>
</UL>

<UL style="list-style-type:decimal">
<LI>りんご</LI>
<LI>バナナ</LI>
<LI>オレンジ</LI>
</UL>

<UL style="list-style-type:upper-alpha">
<LI>りんご</LI>
<LI>バナナ</LI>
<LI>オレンジ</LI>
</UL>


→ 「list-style-type」に指定できる値
 
「list-style-type」に指定できる値と、各ブラウザの対応状況は以下のようになっています。

●IE4以降、NN4.7以降
disc 黒い丸（●）
circle 白い丸（○）
square 黒い四角（■））
decimal 算用数字（1、2、3、…）
lower-roman 小文字のローマ数字（i、ii、iii、…）
upper-roman 大文字のローマ数字（I、II、III、…）
lower-alpha 小文字のアルファベット（a、b、c、…）
upper-alpha 大文字のアルファベット（A、 B、C、…）
none 何も表示しない

●NN6以降のみ対応
lower-latin 小文字のアルファベット（a、b、c、…）
upper-latin 大文字のアルファベット（A、 B、C、…）
decimal-leading-zero 先頭にゼロをつけた算用数字（01、02、03…）
lower-greek 小文字のギリシャ文字（α、β、γ、…）
hebrew 小文字のローマ数字（i、ii、iii、…）
armenian アルメニア数字
georgian グルジア数字/TD>
cjk-ideographic 漢数字（一、二、三、…）
hiragana ひらがな（あ、い、う、…）
katakana カタカナ（ア、イ、ウ、…）
hiragana-iroha ひらがなの「いろは」順（い、ろ、は、…）
katakana-iroha カタカナの「イロハ」順（イ、ロ、ハ、…）


→ 「list-style-image」でマーク表示を画像にする
 
マーク表示に画像を使用する場合は、スタイルシート「list-style-image」をULタグに追加します。マークとして使用する画像は、「list-style-image:url(mark.gif)」という具合に「url(ファイル名)」で指定します。なお、スタイルシート「list-style-type」が同時に指定されている場合は、画像をマークとする「list-style-image」が優先されます。
<UL style="list-style-image:url(mark.gif)">
<LI>りんご</LI>
<LI>バナナ</LI>
<LI>オレンジ</LI>
</UL>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��